
<template>
  <div class="h-100 w-100">
    <div class="h-100 w-100">
      <div class="buttonbar_main">
        <div v-for="(item,index) in viewTool" :key="index" :class="item.class" :title="'title' in item?item.title:null">
          <div :class="item.class=='button_line'?'button_img':'button_img_self'" :style="'src' in item?'background-image: url('+item.src+');':null"></div>
        </div>
      </div>
      <div class="processTool">
        <div v-for="(item,index) in editTool" :key="index" :class="index===selectEditMenuIndex?'edui-btns-item edui-btn-active':item.class" :title="'title' in item?item.title:null" @click="clickEditMenu(index)">
          <div v-if="'src' in item" class="edui-icon edui-icon-m" :style="'background-image: url('+item.src+');'"></div>
          <p v-if="'label' in item" class="edui-h4-title">{{item.label}}</p>
        </div>
      </div>
      <div class="h-100 w-100">
        <div class="drag"></div>
        <node-editer @resetEdit='resetEdit' :editKey='editTool[selectEditMenuIndex].key'></node-editer>
      </div>
    </div>
  </div>
</template>

<script>
import nodeEditer from "./nodeEditer";
export default {
  components: {
    nodeEditer
  },
  data() {
    return {
      viewTool: [
        {
          class: "button_line",
          src: require("../assets/images/buttonbar.gif")
        },
        {
          class: "button_nor",
          title: "属性",
          src: require("../assets/images/buttonbar_attr.png")
        },
        {
          class: "button_nor",
          title: "拷贝",
          src: require("../assets/images/buttonbar_copy.png")
        },
        {
          class: "button_nor",
          title: "粘贴",
          src: require("../assets/images/buttonbar_paste.png")
        },
        {
          class: "button_nor",
          title: "删除",
          src: require("../assets/images/buttonbar_delete.png")
        },
        {
          class: "button_line",
          src: require("../assets/images/buttonbar.gif")
        },
        {
          class: "button_nor",
          title: "选定所有",
          src: require("../assets/images/buttonbar_selectAll.png")
        },
        {
          class: "button_nor",
          title: "显示大图标",
          src: require("../assets/images/buttonbar_changeIconType.png")
        },
        {
          class: "button_nor",
          title: "格式化连线",
          src: require("../assets/images/buttonbar_formatLine.png")
        },
        {
          class: "button_nor",
          title: "流程检测",
          src: require("../assets/images/buttonbar_checkFlow.png")
        },
        {
          class: "button_line",
          src: require("../assets/images/buttonbar.gif")
        },
        {
          class: "button_nor",
          title: "放大画布",
          src: require("../assets/images/buttonbar_panelUp.png")
        },
        {
          class: "button_nor",
          title: "缩小画布",
          src: require("../assets/images/buttonbar_panelDown.png")
        },
        {
          class: "button_nor",
          title: "放大比例",
          src: require("../assets/images/buttonbar_zoomIn.png")
        },
        {
          class: "button_nor",
          title: "缩小比例",
          src: require("../assets/images/buttonbar_zoomOut.png")
        },
        {
          class: "button_nor",
          title: "还原显示比例",
          src: require("../assets/images/buttonbar_resetZoom.png")
        },
        {
          class: "button_nor",
          title: "全屏",
          src: require("../assets/images/buttonbar_fullScreen.png")
        },
        {
          class: "button_line",
          src: require("../assets/images/buttonbar.gif")
        },
        {
          class: "button_nor",
          title: "快捷键说明",
          src: require("../assets/images/buttonbar_help.png")
        }
      ],
      editTool: [
        { class: "edui-btns-splits" },
        {
          class: "edui-btns-item",
          title: "普通模式",
          src: require("../assets/images/buttonbar_select.png"),
          label: "普通模式",
          key: "select"
        },
        {
          class: "edui-btns-item",
          title: "添加连线",
          src: require("../assets/images/buttonbar_line.png"),
          label: "连线",
          key: "line"
        },
        {
          class: "edui-btns-item",
          title: "添加审批节点",
          src: require("../assets/images/buttonbar_reviewNode.png"),
          label: "审批节点",
          key: "reviewNode"
        },
        {
          class: "edui-btns-item",
          title: "添加签字节点",
          src: require("../assets/images/buttonbar_signNode.png"),
          label: "签字节点",
          key: "signNode"
        },
        {
          class: "edui-btns-item",
          title: "添加抄送节点",
          src: require("../assets/images/buttonbar_sendNode.png"),
          label: "抄送节点",
          key: "sendNode"
        },
        {
          class: "edui-btns-item",
          title: "添加机器人节点",
          src: require("../assets/images/buttonbar_robotNode.png"),
          label: "机器人节点",
          key: "robotNode"
        },
        {
          class: "edui-btns-item",
          title: "添加启动子流程节点",
          src: require("../assets/images/buttonbar_startSubProcessNode.png"),
          label: "启动子流程节点",
          key: "startSubProcessNode"
        },
        {
          class: "edui-btns-item",
          title: "添加回收子流程节点",
          src: require("../assets/images/buttonbar_recoverSubProcessNode.png"),
          label: "回收子流程节点",
          key: "recoverSubProcessNode"
        },
        {
          class: "edui-btns-item",
          title: "添加人工决策",
          src: require("../assets/images/buttonbar_manualBranchNode.png"),
          label: "人工决策",
          key: "manualBranchNode"
        },
        {
          class: "edui-btns-item",
          title: "添加条件分支",
          src: require("../assets/images/buttonbar_autoBranchNode.png"),
          label: "条件分支",
          key: "autoBranchNode"
        },
        {
          class: "edui-btns-item",
          title: "添加并行分支",
          src: require("../assets/images/buttonbar_splitJoinNode.png"),
          label: "并行分支",
          key: "splitJoinNode"
        },
        {
          class: "edui-btns-item",
          title: "添加投票节点",
          src: require("../assets/images/buttonbar_voteNode.png"),
          label: "投票节点",
          key: "voteNode"
        },
        {
          class: "edui-btns-item",
          title: "添加检查节点",
          src: require("../assets/images/buttonbar_checkNode.png"),
          label: "检查节点",
          key: "checkNode"
        },
        {
          class: "edui-btns-item",
          title: "添加自由子流程节点",
          src: require("../assets/images/buttonbar_freeSubFlowNode.png"),
          label: "自由子流程节点",
          key: "freeSubFlowNode"
        },
        {
          class: "edui-btns-item",
          title: "添加嵌入子流程节点",
          src: require("../assets/images/buttonbar_embeddedSubFlowNode.png"),
          label: "嵌入子流程节点",
          key: "embeddedSubFlowNode"
        },
        {
          class: "edui-btns-item",
          title: "添加即席子流程节点",
          src: require("../assets/images/buttonbar_adHocSubFlowNode.png"),
          label: "即席子流程节点",
          key: "adHocSubFlowNode"
        },
        {
          class: "edui-btns-item",
          title: "快捷添加审批节点",
          src: require("../assets/images/quickaddreviewnode.png"),
          label: "快捷添加审批节点",
          key: "quickaddreviewnode"
        },
        { class: "edui-btns-splits" },
        {
          class: "edui-btns-item",
          title: "流程仿真",
          src: require("../assets/images/flowSimulation.png"),
          label: "流程仿真",
          key: "flowSimulation"
        }
      ],
      selectEditMenuIndex: 1
    };
  },

  computed: {},
  // mounted() {
  //   let _this = this;
  //   _this.$nextTick(() => {});
  // },
  methods: {
    clickEditMenu(index) {
      this.selectEditMenuIndex = index;
    },
    resetEdit() {
      this.selectEditMenuIndex = 1;
    }
  }
};
</script>

<style lang="scss" >
@import "./style/variables.scss";
</style>
